<template xmlns="" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-card shadow="hover" style="height:100%;width: 100%;">
                <el-row :gutter="20" class="mgb20">
                    <el-page-header @back="goBack" content="阅读界面">
                    </el-page-header>
                </el-row>
                <el-row :gutter="20" class="mgb20">
                    <ebook ref="ebook" :book-props="bookProps" @refreshComments="refreshComments"></ebook>
                </el-row>
            </el-card>
            <!--评论版块-->
        </el-row>
        <el-row :gutter="20" class="mgb20">
            <el-card shadow="hover" style="height:100%;width: 100%;">
                <!--<el-row :gutter="20" class="mgb20">-->
                <!--<el-col :span="8">-->
                <!--&lt;!&ndash;收藏&ndash;&gt;-->
                <!--<el-tooltip content="收藏" placement="top">-->
                <!--<el-button type="warning" icon="el-icon-star-off" circle></el-button>-->
                <!--</el-tooltip>-->
                <!--</el-col>-->
                <!--<el-col :span="3" style="font-family: Helvetica,serif;font-size: 14px;font-weight: bold">-->
                <!--&lt;!&ndash;评分&ndash;&gt;-->
                <!--喜欢就打个分吧:-->
                <!--</el-col>-->
                <!--<el-col :span="8">-->
                <!--<el-rate v-model="rateValue" show-score text-color="#ff9900"></el-rate>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <!--<el-row :gutter="20" class="mgb20">-->
                <!--<el-col :span="8">-->
                <!--<mu-avatar :size="80">-->
                <!--<img src="../../assets/img/other/gin1.png">-->
                <!--</mu-avatar>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="24">
                        <el-divider content-position="center">
                            <span class="commets">
                                匆匆过客，留名于此？
                            </span>
                        </el-divider>
                        <mu-text-field v-model="comments"
                                       placeholder="请输入您精彩的点评..."
                                       multi-line
                                       full-width
                                       label-float
                                       error-text=""
                                       :rows="3"
                                       :max-length="200"
                        ></mu-text-field>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="mgb20">
                    <mu-flex justify-content="center" align-items="center">
                        <mu-button full-width color="success" @click="doComment(comments)">提交</mu-button>
                    </mu-flex>
                </el-row>
            </el-card>
        </el-row>
        <el-row :gutter="20" class="mgb20">
            <el-container>
                <el-card data-mu-loading-color="secondary"
                         data-mu-loading-overlay-color="rgba(0, 0, 0, .6)" v-loading="loading" shadow="hover"
                         style="height:100%;width: 100%;">
                    <el-divider content-position="center">
                        <span class="commets">全部评论</span>
                    </el-divider>
                    <div v-if="discussion === undefined">
                        一个人都木有
                    </div>
                    <div v-else>
                        <mu-list textline="three-line">
                            <mu-list-item avatar :ripple="false" button
                                          :key="disc.id"
                                          v-for="disc in discussion"
                                          :data="disc">
                                <mu-list-item-action>
                                    <mu-avatar :size="45">
                                        <img :src="disc.discussUser && disc.discussUser.avatar">
                                    </mu-avatar>
                                </mu-list-item-action>
                                <mu-list-item-content>
                                    <mu-list-item-sub-title
                                            style="color: black;font-family: Helvetica, Arial, sans-serif">
                                        {{disc.content}}
                                    </mu-list-item-sub-title>
                                    <mu-list-item-sub-title>
                                        <span class="publishUser">{{disc.discussUser && disc.discussUser.username}} -</span>
                                        <span class="publishTime">{{disc.createTime | dateformat}}</span>
                                    </mu-list-item-sub-title>
                                    <!--<mu-list-item-sub-title class="flexRight">-->
                                    <!--<el-tooltip content="回复" placement="top">-->
                                    <!--<el-button size="mini" icon="el-icon-chat-line-round"-->
                                    <!--circle></el-button>-->
                                    <!--</el-tooltip>-->
                                    <!--</mu-list-item-sub-title>-->
                                </mu-list-item-content>
                            </mu-list-item>
                        </mu-list>
                        <el-row justify="center" :gutter="20" class="mgb20">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-size="limit"
                                    :page-sizes="[10,20,30]"
                                    layout="total, sizes ,prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </el-row>
                    </div>
                </el-card>
            </el-container>
        </el-row>
    </div>
</template>

<script>
    import Ebook from '../front/Ebook.vue'

    export default {
        name: 'readpage',
        components: {
            ebook: Ebook
        },
        data() {
            return {
                rateValue: null,
                comments: "",
                discussion: [],
                bookProps: "",
                panel: '',//伸缩
                loading: false,
                currentBookId: "",
                currentPage: 1,//当前页
                limit: 10,//每页展示多少条数据,
                total: 0,//总数
                pages: 0//总页数
            }
        },
        methods: {
            goBack() {
                console.log('go back');
                this.$router.push('/echoview');
            },
            doComment(comments) {
                //为空评论
                if (comments === "") {
                    this.open("说点什么吧", 'warning');
                    return;
                }
                this.$axios.post("/api/book/doComment", this.$qs.stringify({
                    bookId: this.currentBookId,
                    content: comments
                })).then(res => {
                    console.log("评论:" + comments);
                    //清空输入内容
                    this.comments = "";
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        //提示评价成功
                        this.open(resultData.message, 'success');
                        //刷新评论框
                        this.initDiscussion(this.currentBookId, this.currentPage, this.limit)
                    } else {
                        console.log("data get failed.");
                    }
                    this.hideLoading();
                });

            },
            open(responseMsg, messageType) {
                this.$message({
                    type: messageType,
                    showClose: true,
                    message: responseMsg
                });
            },
            handleSizeChange(size) {
                this.limit = size;
                console.log(this.pagesize);  //每页下拉显示数据
                console.log(`每页 ${size} 条`);
                this.initDiscussion(this.currentBookId, this.currentPage, size);

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                console.log(`当前页: ${currentPage}`);
                this.initDiscussion(this.currentBookId, currentPage, this.limit);

            },
            //初始化加载评论
            initDiscussion(bookId, current, size) {
                if (bookId !== "") {
                    this.showLoading();
                    this.$axios.post("/api/book/getDiscussion", this.$qs.stringify({
                        bookId: bookId,
                        current: current,
                        size: size
                    })).then(res => {
                        console.log(res);
                        let resultData = res.data;
                        let records = res.data.data.records;
                        let page = res.data.data;
                        if (resultData && resultData.code === 200) {
                            console.log("data get it！");
                            this.discussion = [];
                            this.discussion.push(...records);
                            this.setPaginations(page);
                            console.log(this.discussion)
                        } else {
                            console.log("data get failed.");
                        }
                        this.hideLoading();
                    })
                }
            },
            refreshComments(bookId) {
                this.currentBookId = bookId;
                this.initDiscussion(bookId, 1, this.limit);
            },
            //设置分页属性
            setPaginations(page) {
                this.currentPage = page.current;
                this.total = page.total;
                this.limit = page.size;
                this.pages = page.pages;
            },
            //展示loading
            showLoading() {
                this.loading = true;
            },
            //隐藏loading
            hideLoading() {
                this.loading = false;
            },

        },
        //实例创建完成
        created() {
            this.bookProps = this.$route.params.bookProps;
            this.currentBookId = this.bookProps.id;
            this.initDiscussion(this.currentBookId, 1, this.limit);
            console.log("instance ok!");
        },
        //数据加载完成
        mounted() {

        }

    }

</script>


<!--样式-->
<style scoped>
    .commets {
        color: black;
        font-family: "Courier New", Courier, monospace;
        font-size: 20px;
        font-weight: bold;

    }

    .publishUser {
        color: #2d2f33;
        font-weight: bold;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
    }

    .publishTime {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 10px;
    }

    .flexRight {
        text-align: right;
    }

    .cell_dashed {
        border-bottom: 1px gray;
        height: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        text-align: left;
        border-radius: 4px;
    }

    .el-tag {
        text-align: center;
        margin-left: 50px;
        cursor: pointer;
    }

    .el-header, .el-footer {
        background-color: white;
        color: #333;
        text-align: left;
        line-height: 60px;
    }

    .el-aside {
        background-color: white;
        color: #333;
        text-align: left;
        line-height: 20px;
        padding-top: 10px;
    }

    .el-main {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 130px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }


</style>
